﻿<template>
  <div>
    <a-button @click="handelinsert">新增</a-button>
    <a-button @click="handleSave">保存</a-button>
    <vxe-grid
    border
    highlight-hover-row
    hlight-current-row
    show-overflow 
    class="vxe-table-antd" 
    ref="xtable" height="460" 
    :loading="loading" 
    :data="tableData" 
    :columns="columns" 
    :edit-config="{trigger: 'dblclick',mode: 'row', showStatus: true, icon: 'fa fa-edit'}">
    <template v-slot="operated">
      <a-button @click="handleSave">保存</a-button>
    </template>         
    </vxe-grid>
  </div>
  
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      loading: false,
      tableData: [{
        dengji: 0,
        glsx: 5,
        glxx: 2,
        flsx: 5,
        flxx: 2
      },
      {
        dengji: 1,
        glsx: 10,
        glxx: 5,
        flsx: 10,
        flxx: 5
      }]
    }
  },
  computed: {
    columns () {
      return [
        {
          type: 'index',
          title: ' ',
          width: 50
        },
        {
          field: 'dengji',
          title: '等级',
          editRender: {
            name: 'ASelect',
            options: [{
              'label': '初级',
              'value': 0
            },
            {
              'label': '中级',
              'value': 1
            },
            {
              'label': '高级',
              'value': 2
            }]
          }
        },
        {
          field: 'glsx',
          title: '骨料上限',
          editRender: {
            name: 'AInput'
          }
        },
        {
          field: 'glxx',
          title: '骨料下线',
          editRender: {
            name: 'AInput'
          }
        },
        {
          field: 'flsx',
          title: '粉料上线',
          editRender: {
            name: 'AInput'
          }
        },
        {
          field: 'flxx',
          title: '粉料下线',
          editRender: {
            name: 'AInput'
          }
        },
        {
          field: 'operated',
          title: '操作',
          fixed: 'right'
        }
      ]
    }
  },
  methods: {
    handelinsert () {
      let xgrid = this.$refs.xtable
      let record = {
        dengji: '',
        glsx: '',
        glxx: '',
        flsx: '',
        flxx: ''
      }
      xgrid.insert(record).then(({row}) => xgrid.setActiveRow(row))
    },
    handleSave () {
      let {insertRecord,removeRecords,updateRecords} = this.$refs.xgrid.getRecordset()
      if(insertRecord.length || removeRecords.length || updateRecords.length) {
        this.$message.success('数据修改')
      }else{
        this.$message.error('数据未修改')
      }
    }
  }
}
</script>

